<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="materialCode" style="display: flex;">
				<span style="margin-right: 20rpx;">物料码</span>
				<u--input 
					placeholder="请输入/扫描" 
					v-model.trim="query.materialCode" 
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="materialBatch" style="display: flex;">
				<span style="margin-right: 20rpx;">批次号</span>
				<u--input 
					placeholder="请输入/扫描" 
					v-model.trim="query.materialBatch"
					@confirm="getMoreDetail"
					suffixIcon="scan"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item style="display: flex;">
				<view style="display: flex;flex: 1;align-items: center;">
					<span style="margin-right: 50rpx;">容器</span>
					<u-tag v-if="containerType === 1" style="margin-right: 50rpx;" text="料箱" type="warning" plain plainFill size="medium"></u-tag>
					<u-tag v-else-if="containerType === 2" style="margin-right: 50rpx;" text="托盘" type="success" plain plainFill size="medium"></u-tag>
					<u-tag v-else-if="containerType === 3" style="margin-right: 50rpx;" text="工装" type="primary" plain plainFill size="medium"></u-tag>
					<u-tag v-else style="margin-right: 50rpx;" text="无" type="error" plain plainFill size="medium"></u-tag>
				</view>
				<view style="display: flex;flex: 1;align-items: center;">
					<span style="margin-right: 50rpx;">目标库区</span>
					<u-tag :text="area ? area : '无'" plain plainFill type="info"></u-tag>
				</view>
			</u-form-item>
			<u-form-item label="" prop="newContaner" style="display: flex;">
				<span style="margin-right: 20rpx;">容器码</span>
				<u--input
					placeholder="请输入/扫描"
					v-model.trim="query.containerCode"
					@confirm="getDetail()"
					suffixIcon="scan"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
					:disabled="containerType === 4"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="quantity" style="display: flex;">
				<span style="margin-right: 50rpx;">数量</span>
				<u--input 
					type="number"
					placeholder="请输入数量" 
					v-model.trim="query.quantity" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
		</u--form>
		<view style="display: flex; gap: 20rpx;">
			<view 
				:style="{
					color: needCount > 0 ? '#19be6b' : '#fa3534',
					border: `2rpx solid ${needCount > 0 ? '#19be6b' : '#fa3534'}`,
					borderRadius: '10rpx',
					boxSizing: 'border-box',
					padding: '10rpx 20rpx',
					flex: 3,
					display: 'flex',
					alignItems: 'center'
				}"
			>
				需使用空托盘数量: {{ needCount }}
			</view>
		</view>
		<uni-table ref="info" border stripe emptyText="暂无数据" style="margin: 10px 0">
			<uni-tr>
				<uni-th width="40">已入库数量</uni-th>
				<uni-th width="40">入库单数量</uni-th>
				<uni-th width="40">目标储位</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tips" :key="index">
				<uni-td class="selectable">{{ item.realQty ? item.realQty : 0 }}</uni-td>
				<uni-td class="selectable">{{ item.InboundOrderQty ? item.InboundOrderQty : 0 }}</uni-td>
				<uni-td class="selectable">{{ item.storage ? item.storage : '' }}</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 推荐物料 -->
		<view style="margin: 10px 0;font-weight: 600;" v-if="suggetMaterial.length > 0">物料推荐表 :</view>
		<uni-table ref="suggetMaterial" border stripe emptyText="暂无数据" style="margin: 10px 0" v-if="suggetMaterial.length > 0">
			<uni-tr>
				<uni-th width="40">物料号</uni-th>
				<uni-th width="40">名称</uni-th>
				<uni-th width="30">库区</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in suggetMaterial" :key="index">
				<uni-td class="selectable">{{ item.materialCode }}</uni-td>
				<uni-td class="selectable">{{ item.materialName }}</uni-td>
				<uni-td class="selectable">{{ item.warehouseArea }}</uni-td>
			</uni-tr>
		</uni-table>
		<view style="font-weight: 600;margin: 10px 0;" v-if="suitableContainer.length > 0">推荐容器: </view>
		<uni-table ref="suitableContainer" border stripe emptyText="暂无数据" style="margin: 10px 0" v-if="suitableContainer.length > 0">
			<uni-tr>
				<uni-th width="40">容器码</uni-th>
				<uni-th width="40">容器状态</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in suitableContainer" :key="index">
				<uni-td class="selectable">{{ item.containerCode }}</uni-td>
				<uni-td class="selectable">{{ item.isInScene === 0 ? '待出库' : '已出库' }}</uni-td>
			</uni-tr>
		</uni-table>
		<view style="position: fixed; bottom: 0; left: 0; width: 100%; padding: 10rpx; background-color: #fff; display: flex; justify-content: space-between;box-sizing: border-box;gap: 20rpx;">
			<!-- <u-button :disabled="submitFlag" type="primary" text="确认" @click="submit"></u-button> -->
			<u-button type="primary" text="确认" @click="submit"></u-button>
			<!-- <u-button type="primary" text="满车" @click="fullLoad"></u-button> -->
			<u-button type="warning" text="重置" @click="reset"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal 
			:show="show" 
			:title="title" 
			:content='content' 
			cancelText="取消" 
			:showCancelButton="true" 
			@cancel="show = false" 
			@confirm="show = false">
		</u-modal>
		<u-modal
			:show="showModal"
			:title="modalTitle"
			:content='modalContent'
			:showCancelButton	="true"
			@confirm="confirmSubmit"
			@cancel="cancelModal"
		></u-modal>
		<u-modal
			:show="showModal2"
			title="提示"
			:content='modalContent2'
			:showCancelButton	="true"
			@confirm="confirmSubmit2"
			@cancel="cancelModal2"
		></u-modal>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import { checkDataAPI ,getDetailAPI, getMoreInfoAPI, bindAPI, fullLoadAPI, getNullPalletAPI, useNullPalletAPI } from '@/api/work/inbound.js'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				showModal: false,
				modalTitle: '提示',
				modalContent: '批次号为空, 是否继续绑定物料?',
				query: {
					materialCode: '',
					materialBatch: '',
					containerCode: '',
					quantity: ''
				},
				containerType: '',
				area: null,
				tips: [],
				show: false,
				title:'',
				content:'',
				needCount: null,
				isolationArea: null,
				submitFlag: true,
				suitableContainer: [],
				suggetMaterial: [],
				showModal2: null,
				modalContent2: '',
				
			};
		},
		onLoad(options) {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
			this.getNullPallet()
		},
		onShow() {
			this.reset()
		},
		onUnload() {  
		  // 移除监听事件
		  uni.$off('scancodedate')
		},
		methods: {
			getCode(code) {
				const pattern = /^[A-Za-z]\d{9}$/
				if (code.length === 18) {
					this.query.materialCode = code
					this.getMoreInfo()
				} else if (pattern.test(code)) {
					this.query.containerCode = code
					this.getDetail()
				} else if (/^WM/.test(code)) {
					this.query.materialBatch = code
				} else {
					this.query.materialCode = code
					this.getMoreInfo()
				}
				if(this.query.materialCode && this.query.materialBatch) {
					this.getMoreInfo()
				}
			},
			cancelModal() {
				this.showModal = false
			},
			confirmSubmit() {
				this.bind()
			},
			// 物料绑定按钮
			async submit() {
				if (!this.query.materialCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描物料码'
					})
				}
				if (this.query.materialCode && !this.query.containerCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描容器码'
					})
				}
				if (this.query.materialCode && this.query.containerCode && !this.query.quantity) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请填写数量'
					})
				}
				if (!/^\d+$/.test(this.query.quantity)) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '数量必须为数字且大于等于0'
					})
				}
				if (!this.query.materialBatch) {
					this.modalContent = '批次号为空, 是否继续绑定物料?'
					this.showModal = true
					return
				}
				// console.log(this.query.quantity, this.tips[0].InboundOrderQty)
				if (Number(this.query.quantity) > Number(this.tips[0].InboundOrderQty)) {
					this.modalContent = '所填写数量大于入库单数量, 是否继续?'
					this.showModal = true
					return
				}
				const result = await this.check()
				console.log(result)
				if (result.meta.code === 201) {
					this.modalContent2 = result.meta.msg
					this.showModal2 = true
					return
				} else if (result.meta.code === 500) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: result.meta.msg
					})
				} else {
					this.bind()
				}
			},
			// 物料绑定
			async bind() {
				const res = await bindAPI({
					materialCode: this.query.materialCode,
					materialBatch: this.query.materialBatch,
					containerCode: this.query.containerCode,
					quantity: this.query.quantity,
					targetStorageCode: this.tips.targetStorage,
					type: 1
				})
				if (res.meta.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '绑定成功'
					})
					this.reset()
				} else if(res.meta.code === 201) {
					this.showModal = false
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
					this.reset()
				} else {
					this.showModal = false
					this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			// 检查
			async check() {
				const submitForm = {
					materialCode: this.query.materialCode,
					materialBatch: this.query.materialBatch,
					containerCode: this.query.containerCode,
					quantity: this.query.quantity,
					targetStorageCode: this.tips.targetStorage,
					type: 1
				}
				const res = await checkDataAPI(submitForm)
				return res
			},
			getMoreDetail() {
				this.getMoreInfo()
			},
			// 重置
			reset() {
				this.getNullPallet()
				this.submitFlag = true
				this.isolationArea = null
				this.query = {
					materialCode: '',
					materialBatch: '',
					containerCode: '',
					quantity: ''
				}
				this.showModal = false
				this.containerType = ''
				this.area = null
				this.tips = []
				this.suggetMaterial = []
				this.suitableContainer = []
				this.show = false
			},
			// 物料+批次获取信息
			async getMoreInfo() {
				const submitForm = {
					materialCode: this.query.materialCode,
					materialBatch: this.query.materialBatch
				}
				const res = await getMoreInfoAPI({
					materialCode: this.query.materialCode,
					materialBatch: this.query.materialBatch
				})
				if (res.meta.code === 200) {
					if (!this.query.materialBatch) {
						this.query.materialBatch = res.data.materialBatch
					}
					const data = {
						realQty: res.data.realQty,
						InboundOrderQty: res.data.InboundOrderQty,
						storage: null
					}
					this.containerType = res.data.containerType
					this.area = res.data.area
					if (this.tips.length > 0) {
						this.tips[0] = data
					} else {
						this.tips.push(data)
					}
					if (this.suggetMaterial.length > 0) {
						this.suitableContainer = res.data.suitableContainers
						this.suggetMaterial = []
						return
					} else {
						this.suitableContainer = res.data.suitableContainers
					}
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			async fullLoad() {
				if (!this.query.containerCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描容器码'
					})
				}
				const res = await fullLoadAPI(this.query.containerCode)
				if (res.meta.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '执行入库单成功'
					})
					this.reset()
				} else if (res.meta.code === 201) {
					this.content = res.meta.msg
					this.show = true
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			async getDetail() {
				const res = await getDetailAPI(this.query)
				if (res.meta.code === 200) {
					this.submitFlag = false
					if (res.data.containerResp.container.containerType === 1 && res.data.containerResp.container.isInScene === 0) {
						this.submitFlag = true
						return this.$refs.uToast.show({
							type: 'warning',
							message: '该容器未出库'
						})
					}
					const flag = res.data.containerResp.container.isPre && res.data.containerResp.container.isInScene
					if (flag === 1) {
						uni.navigateTo({
							url: `/pages/work/inBound/maxboxinbound?containerCode=${this.query.containerCode}`
						})
					}
					this.suitableContainer = []
					this.isolationArea = res.data.containerResp.container.isolationArea
					// this.tableData = res.data.containerResp.containerDetails
					this.suggetMaterial = res.data.containerResp.suggetMaterial
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
					this.submitFlag = true
					// this.tableData = []
					return
				}
			},
			async useNullPallet() {
				if (!this.query.containerCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描容器码'
					})
				}
				const res = await useNullPalletAPI(this.query.containerCode)
				if (res.meta.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
					this.getNullPallet()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			async getNullPallet() {
				const res = await getNullPalletAPI()
				if (res.meta.code === 200) {
					this.needCount = res.data.count
				}
			},
			cancelModal2() {
				this.showModal2 = false
				this.modalContent2 = ''
			},
			confirmSubmit2() {
				this.showModal2 = false
				this.modalContent2 = ''
				this.bind()
			}
		}
	}
</script>

<style lang="scss" scoped>
.selectable {
	user-select: text; /* 确保内容可选 */
}
.boxDetail {
	::v-deep uni-view .u-input {
		padding: 5rpx !important;
	}
}
</style>
